'use client';

import React from 'react';
import { Table, Tag, Space, Button, Popconfirm, Avatar, Typography, Select, Pagination } from 'antd';
import { EyeOutlined, EditOutlined, DeleteOutlined, UserOutlined } from '@ant-design/icons';
import dayjs from 'dayjs';
import { User, UserStatus } from '@/types/user';
import { 
  getStatusLabel, 
  getStatusColor, 
  getRoleLabel, 
  getRoleColor,
  USER_STATUS_OPTIONS
} from '@/utils/userConstants';

const { Text } = Typography;
const { Option } = Select;

interface UserListProps {
  users: User[];
  loading: boolean;
  pagination: {
    current: number;
    pageSize: number;
    total: number;
  };
  onPaginationChange: (page: number, pageSize: number) => void;
  onViewUser: (user: User) => void;
  onEditUser: (user: User) => void;
  onDeleteUser: (userId: string) => void;
  onUpdateUserStatus: (userId: string, status: UserStatus) => void;
}

const UserList: React.FC<UserListProps> = ({
  users,
  loading,
  pagination,
  onPaginationChange,
  onViewUser,
  onEditUser,
  onDeleteUser,
  onUpdateUserStatus,
}) => {
  const handleStatusChange = (userId: string, status: UserStatus) => {
    onUpdateUserStatus(userId, status);
  };

  const columns = [
    {
      title: '用户',
      dataIndex: 'displayName',
      key: 'displayName',
      render: (text: string, record: User) => (
        <Space>
          <Avatar icon={<UserOutlined />} />
          <div>
            <div style={{ fontWeight: 500 }}>{record.displayName}</div>
            <Text type="secondary" style={{ fontSize: 12 }}>
              @{record.username}
            </Text>
          </div>
        </Space>
      ),
    },
    {
      title: '邮箱',
      dataIndex: 'email',
      key: 'email',
    },
    {
      title: '角色',
      dataIndex: 'role',
      key: 'role',
      render: (role: string) => (
        <Tag color={getRoleColor(role as any)}>
          {getRoleLabel(role as any)}
        </Tag>
      ),
    },
    {
      title: '状态',
      dataIndex: 'status',
      key: 'status',
      render: (status: UserStatus, record: User) => (
        <Select
          value={status}
          onChange={(newStatus) => handleStatusChange(record.id, newStatus)}
          style={{ width: 120 }}
          size="small"
        >
          {USER_STATUS_OPTIONS.map(option => (
            <Option key={option.value} value={option.value}>
              <Tag color={option.color} style={{ margin: 0 }}>
                {option.label}
              </Tag>
            </Option>
          ))}
        </Select>
      ),
    },
    {
      title: '部门',
      dataIndex: 'department',
      key: 'department',
      render: (department: string) => department || '-',
    },
    {
      title: '职位',
      dataIndex: 'position',
      key: 'position',
      render: (position: string) => position || '-',
    },
    {
      title: '最后登录',
      dataIndex: 'lastLoginAt',
      key: 'lastLoginAt',
      render: (lastLoginAt: string) => 
        lastLoginAt ? dayjs(lastLoginAt).format('YYYY-MM-DD HH:mm') : '未登录',
    },
    {
      title: '创建时间',
      dataIndex: 'createdAt',
      key: 'createdAt',
      render: (createdAt: string) => dayjs(createdAt).format('YYYY-MM-DD'),
    },
    {
      title: '操作',
      key: 'actions',
      render: (_: any, record: User) => (
        <Space>
          <Button
            type="text"
            icon={<EyeOutlined />}
            onClick={() => onViewUser(record)}
            size="small"
          >
            查看
          </Button>
          <Button
            type="text"
            icon={<EditOutlined />}
            onClick={() => onEditUser(record)}
            size="small"
          >
            编辑
          </Button>
          {record.role !== 'admin' && (
            <Popconfirm
              title="确定要删除这个用户吗？"
              onConfirm={() => onDeleteUser(record.id)}
              okText="确定"
              cancelText="取消"
            >
              <Button
                type="text"
                danger
                icon={<DeleteOutlined />}
                size="small"
              >
                删除
              </Button>
            </Popconfirm>
          )}
        </Space>
      ),
    },
  ];

  return (
    <div>
      <Table
        columns={columns}
        dataSource={users}
        rowKey="id"
        loading={loading}
        pagination={false}
        scroll={{ x: 800 }}
        locale={{
          emptyText: '暂无用户数据',
        }}
      />

      {pagination.total > 0 && (
        <div style={{ display: 'flex', justifyContent: 'center', marginTop: 24 }}>
          <Pagination
            current={pagination.current}
            pageSize={pagination.pageSize}
            total={pagination.total}
            onChange={onPaginationChange}
            showSizeChanger
            showQuickJumper
            showTotal={(total, range) => 
              `第 ${range[0]}-${range[1]} 条，共 ${total} 条`
            }
            pageSizeOptions={['10', '20', '50', '100']}
          />
        </div>
      )}
    </div>
  );
};

export default UserList; 